<template>
  <header>
    <h2>待办事项</h2>
  </header>
  <div class="operate">
    <input type="text" v-model="title"
      placeholder="请输入待办事项，回车添加"
      @keyup.enter="add">
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const title = ref('')

  const props = defineProps({
    addItem: Function,
  })
  const add = () => {
    if (!title.value) return; /** 为空不进行提交 */
    props.addItem({
      id: Date.now(),
      title: title.value,
      checked: false,
      created_at: new Date().toDateTime() /** 需要引入时间扩展函数 */
    })
    title.value = '' /** 清空输入框 */
  }
</script>
<!-- <script>
import { ref } from 'vue'
export default {
  name: 'Header',
  props: {
    addItem: {
      type: Function,
      required: true
    },
  },
  setup(props) {
    const title = ref('')

    const add = () => {
      if (!title.value) return;
      props.addItem({
        id: Date.now(),
        title: title.value,
        checked: false
      })
      // 清空输入框
      title.value = ''
    }
    return {
      title,
      add
    }
  }
}
</script> -->

<style scoped>
  header{
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px 0;
    /* box-shadow: 0px 2px 3px 0px #cfdfff; */
  }
  h2{
    font-size: 24px;
    color: #6396ff;
  }
  .operate {
    padding: 15px;
    background-color: #fff;
  }
  input{
    font-size: 14px;
    font-weight: 600;
    padding: 10px 5px;
    width: calc(100% - 10px);
    border: 1px solid #f1f1f1;
    border-radius: 3px;
  }
  input:active, input:focus {
    border-color: #6396ff;
    box-shadow: 0 0 5px #6396ff;
  }
</style>